<template>
  <div v-if="visible" ref="refmodel">
    <a-modal
      v-model:visible="visible"
      title="标记所在地图坐标"
      @ok="handleOk"
      :maskClosable="false"
      width="720px"
      ok-text="确定"
      cancel-text="取消"
      :getContainer="() => $refs.refmodel"
    >
      <iframe
        :src="src"
        id="getpoint"
        width="100%"
        height="400"
        frameborder="0"
      >
        您的浏览器不支持iframe，请升级
      </iframe>
    </a-modal>
  </div>
</template>
<script>
import { defineComponent, reactive, toRefs } from "vue";
import { domainUrl } from "@/config";
export default defineComponent({
  setup(props, { emit }) {
    var src = domainUrl() + "/static/html/getpoint.html?r=" + Math.random() * 100;
    let state = reactive({
      visible: false,
      src: src,
    });
    window.addEventListener("message", function (e) {
      if (e.data.detailed) {
        emit("detailed", e.data.detailed);
      }
    });
    // 显示对话框
    const show = () => {
      state.visible = state.visible ? false : true;
    };
    const handleOk = () => {
      state.visible = state.visible ? false : true;
    };
    return {
      show,
      handleOk,
      ...toRefs(state),
    };
  },
});
</script>

<style lang="less" scoped>
:deep(.ant-modal) {
  .ant-modal-header {
    padding: 16px 16px 10px 16px;
  }
  .ant-modal-body {
    padding: 24px 16px 0 16px;
  }
  .ant-modal-footer {
    padding: 16px;
  }
}
</style>